<template>
	<!-- 老虎机 -->
	<view class="content page" :class="{minH:isComponent==1}" :style="{'background-image':'url(' + $imgUrls(getactrule.backImg) + ')',backgroundColor:getactrule.bjColor}">
		<status-bar :title='getactrule.title' :goHome='fromShare'></status-bar>
		<template v-if='!msg'>
			<image class="tiImg" :src="getactrule.img!=''?$imgUrls(getactrule.img) :staticUrl+'/lottery/luck.png'" mode="widthFix"></image>
			<image class="bsimg" :src="staticUrl+'/lottery/bs.png'" mode="widthFix"></image>
			<view class="animetionBox">
				<view class="cjBox">
					<image class="cjkimg" :src="staticUrl+'/lottery/jpk.png'" mode="widthFix"></image>
					<view class="swiperBox">
						<view class="swiperItemBox">
							<view class="swiperListBox">
								<view class="swipersBox" :style="{'transform':'translateY(' + prize1 + '%)'}">
									<view class="swipers" v-for="(list,i) in prizeArry" :key="i">
										<image :src="list.img!=''?$imgUrls(list.img) :staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
									</view>
									<!-- <view class="swipers">
										<image :src="prizeArry[0].img!=''?imgUrl+prizeArry[0].img:staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
									</view> -->
								</view>
							</view>
							<view class="swiperListBox">
								<view class="swipersBox" :style="{'transform':'translateY(' + prize2 + '%)'}">
									<view class="swipers" v-for="(list,i) in prizeArry" :key="i">
										<image :src="list.img!=''?$imgUrls(list.img) :staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
									</view>
									<!-- <view class="swipers">
										<image :src="prizeArry[0].img!=''?imgUrl+prizeArry[0].img:staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
									</view> -->
								</view>
							</view>
							<view class="swiperListBox">
								<view class="swipersBox" :style="{'transform':'translateY(' + prize3 + '%)'}">
									<view class="swipers" v-for="(list,i) in prizeArry" :key="i">
										<image :src="list.img!=''?$imgUrls(list.img) :staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
									</view>
									<!-- <view class="swipers">
										<image :src="prizeArry[0].img!=''?imgUrl+prizeArry[0].img:staticUrl+'/lottery/thanks.png'" mode="aspectFit"></image>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="horse">
					<view class="horse_d" v-for="(item,index) in turntable_r" :key="index" :style="{'background':item.bg,'box-shadow':'0 0 10px 1px'+item.bg}"></view>
				</view>
				<view class="decorate">
					<view class="decorate_left">
						<view class="decorate_r"></view>
						<view class="decorate_r"></view>
						<view class="decorate_r"></view>
					</view>
					<view class="decorate_right">
						<view class="decorate_r"></view>
						<view class="decorate_r"></view>
						<view class="decorate_r"></view>
					</view>
				</view>
			</view>
			<view class="centerBox">
				<view class="centContent">
					<image class="imageOne" :src="staticUrl+'/lottery/an.png'" mode="widthFix"></image>
					<image class="imagesree" @touchstart="press" @touchend="loosen" :class="draw?'imagesClick':''" :src="staticUrl+'/lottery/anzd.png'" mode="scaleToFill"></image>
					<image class="imageTwo" :src="staticUrl+'/lottery/cj.png'" mode="widthFix"></image>
				</view>
			</view>
			<view class="bottomBox">
				<view class="bottomContent">
					<view class="contensBox">
						<view class="winning">
							<swiper autoplay="true" interval="3000" duration="1000" circular="true" vertical="true" class="swiper" disable-touch="true">
								<swiper-item v-for="(winn,index) in getactrule.winningUser" :key="index">
									<view class="swiper-item">{{winn.text}}</view>
								</swiper-item>
							</swiper>
						</view>
						<view class="btnBox">
							<view @click="btnlook(3)" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}" class="view_btn view_btn_left">活动说明</view>
							<view @click="btnlook(2)" :style="{'background': 'url('+staticUrl+'/lottery/jx.png) no-repeat','background-size': '100% 100%'}" class="view_btn">我的奖品</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<empty type='1' v-if='msg' cat='2' :msg='msg'></empty>
		<showModel @cancelFunc='closeModel' v-if='showModal' type='2'></showModel>
		<Popup v-if="PopupIsShow" :viewText="act_rule" :types="types" :prizeType="prizeTypes" :prizeDate="prizeDate" @closepopup="closePopups"></Popup>
	</view>
</template>

<script>
	import Popup from "../components/popup.vue"
	var that;
	export default{
		props:['gid','isComponent'],
		components:{
			Popup
		},
		data(){
			return{
				showModal: false,
				turntable_r:[
					{bg:'#E0820B'},
					{bg:'#FFFFFF'},
					{bg:'#E0820B'},
					{bg:'#FFFFFF'},
					{bg:'#E0820B'},
					{bg:'#FFFFFF'},
					{bg:'#E0820B'},
					{bg:'#FFFFFF'}
				],
				prizeTypes:'',
				PopupIsShow:false,
				types:'',//弹窗类型
				draw:false,
				ondraws:true,
				prizeArry:'',
				//奖品滚动
				prize1:'-600',
				prizeNum1:800,
				prize2:'-400',
				prizeNum2:400,
				prize3:'-600',
				prizeNum3:600,
				// 活动规则
				act_rule:'',
				//接口需要的全局参数
				bid: uni.getStorageSync('bid'),
				cid: '',
				imgUrl: this.imgUrl,
				staticUrl: this.staticUrl,
				getactrule:'',
				pageTitle:'',
				prizeDate:'',//抽奖返回数据
				losing:[],
				msg:'',
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		created() {
			if(this.isComponent == 1){
				that = this
				that.cid = this.gid
				that.getinitialdata()//获取活动配置信息
				that.marquees()
				
			}
		},
		onLoad(e) {
			that = this
			if(e.cid){
				that.cid = e.cid
				that.getinitialdata()//获取活动配置信息
				that.marquees()
			}
			that.getPageData()//获取抽奖奖品列表
			
			if(e.fromShare){that.fromShare = e.fromShare}
		},
		onShareAppMessage() {
			that.$addShareNum('games', that.cid, '1')
			let vid = uni.getStorageSync('vid');
			return {
				title: that.getactrule.title,
				path: '/pages/index/index?share_v_id=' + vid+'&pageType=17&gid=slotMachine&cid='+that.cid
			}
		},
		onShareTimeline() {
			that.$addShareNum('games', that.cid, '2')
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: that.getactrule.title,
				query: `share_v_id=${vid}&cid=${that.cid}&fromShare=1`,
				imageUrl: that.getactrule.img ? that.$imgUrls(that.getactrule.img) : shareData.imageUrl
			}
		},
		methods:{
			closeModel(){
				that.showModal = false
				that.getinitialdata()//获取活动配置信息
				that.marquees()
			},
			press(){
				let vid = uni.getStorageSync("vid")
				if(vid == 0 || !vid){
					that.showModal = true
					return
				}
				if(that.ondraws){
					that.draw = true
				}
			},
			loosen(){//抽奖
				let vid = uni.getStorageSync("vid")
				if(vid == 0 || !vid){
					that.showModal = true
					return
				}
				if(that.ondraws){
					that.ondraws = false
					that.draw = false
					that.$http.post({
						url: '/SRA_LuckDraw/getPrize',
						data: {
							VeriCode: that.bid,
							cid: that.cid,
							v_id: vid
						}
					}).then(res => {
						if(res.data && res.code == 100){
							if(res.data.prizeDate){
								//奖品1
								let pz1 = setInterval(()=>{
									if(that.prizeNum1 == 0){
										that.prizeNum1 = 800
									} else {
										that.prizeNum1 -= 20
									}
									that.prize1 = '-' + that.prizeNum1
									
								},10)
								//奖品2
								let pz2 = setInterval(()=>{
									if(that.prizeNum2 == 0){
										that.prizeNum2 = 800
									} else {
										that.prizeNum2 -= 20
									}
									that.prize2 = '-' + that.prizeNum2
								},10)
								//奖品3
								let pz3 = setInterval(()=>{
									if(that.prizeNum3 == 0){
										that.prizeNum3 = 800
									} else {
										that.prizeNum3 -= 20
									}
									that.prize3 = '-' + that.prizeNum3     
								},10)
								that.prizeDate = res.data
								that.positions = that.prizeDate.prizeDate.position-1
								setTimeout(()=>{
									clearInterval(pz3)
									that.prize3 = '-' + that.positions*100
									
								},3000)
								setTimeout(()=>{
									clearInterval(pz2)
									that.prize2 = '-' + that.positions*100
								},4000)
								setTimeout(()=>{
									clearInterval(pz1)
									that.prize1 = '-' + that.positions*100
									that.ondraws = true
								},5000)
								setTimeout(()=>{
									that.btnlook(1)
								},5800)
							} else {
								setTimeout(()=>{
									clearInterval(pz3)
									that.prize3 = '-' + that.losing[Math.floor(Math.random()*(that.losing.length))]*100
								},3000)
								setTimeout(()=>{
									clearInterval(pz2)
									that.prize2 = '-' + Math.floor(Math.random()*(5-3)+3)*100
								},4000)
								setTimeout(()=>{
									clearInterval(pz1)
									that.prize1 = '-' + that.losing[Math.floor(Math.random()*(that.losing.length))]*100
									that.ondraws = true
								},5000)
								setTimeout(()=>{
									that.btnlook(1)
								},5800)
							}
						} else {
							that.ondraws = true
							uni.showToast({
								icon:"none",
								title: res.notice,
								duration:2000
							})
						}
					})
				}
			},
			marquees(){
				setInterval(()=>{
					for (let col in that.turntable_r) {
						if(that.turntable_r[col].bg == '#E0820B'){
							that.turntable_r[col].bg = '#FFFFFF'
						}else {
							that.turntable_r[col].bg = '#E0820B'
						}
					}
				},150)
			},
			btnlook(i){
				if(i==1){
					that.PopupIsShow = true
					that.types = i
					
				} else if(i==2) {
					uni.getStorage({
						key: 'vid',
						success: function(res){
							if(!res.data){
								that.showModal = true
							}else{
								uni.navigateTo({
									url:"prizeList?cid="+that.cid
								})
							}
						},
						fail() {
							that.showModal = true
						}
					})
				} else if(i==3) {
					//活动规则
					that.PopupIsShow = true
					that.types = i
				}
			},
			closePopups(){
				that.PopupIsShow = false
				that.getinitialdata()
			},
			getPageData(){
				that.$http.post({
					url: '/SRA_LuckDraw/prizeList',
					data: {
						VeriCode: that.bid,
						cid: that.cid
					}
				}).then(res => {
					if(res.data && res.code == 100){
						that.prizeArry = res.data
						for(let j in that.prizeArry){
							if(that.prizeArry[j].title == ''){
								that.losing.push(j)
							}
						}
					}
				})
			},
			getinitialdata(){
				that.$http.post({
					url: '/SRA_LuckDraw/config',
					data: {
						VeriCode: that.bid,
						cid: that.cid
					}
				}).then(res => {
					if(res.data && res.code == 100){
						that.getactrule = res.data
						that.act_rule = that.getactrule.details
						that.pageTitle = that.getactrule.title
						uni.setNavigationBarTitle({
							title: that.getactrule.title
						})
					}else{
						that.msg = res.notice
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 20upx;overflow: hidden;background-repeat: no-repeat;background-size: 100% auto;
		position: relative;
	}
	.minH{
		min-height: calc(100vh - 100rpx)!important;
	}
	
	.tiImg{width:94%;height: 340upx;position: absolute;left: 3%;margin-top: 10upx;z-index: 4;bottom: 864upx;}
	.animetionBox{width: 636upx;height: 600upx;background: #FECB2A;position: absolute;z-index: 1;box-shadow: 0 -20upx 0 0 #FCE797;border-radius: 20upx;left: 50%;bottom: 340upx;padding: 70upx 20upx 0 20upx;margin-left: -318upx;}
	.bottomBox{width: 100%;position: absolute;bottom: 0;height: 300upx;padding: 0 20upx;left: 0;z-index: 5;}
	.bottomContent{width: 100%;position: relative;bottom: 0;height: 100%;background: #F4C423;padding: 30upx;}
	.contensBox{width: 100%;height: 100%;border-radius: 20upx;background: #EAA018;padding: 26upx 0;}
	.centerBox{width: 100%;position: absolute;bottom: 300upx;padding: 0 20upx;left: 0;z-index: 5;height: 130upx;}
	.centContent{width: 100%;height: 100%;position: relative;}
	.imageOne{width: 100%;}
	.imageTwo{position: absolute;width: 80%;left: 10%;bottom: 30upx;}
	.cjkimg{width: 100%;}
	.cjBox{width: 100%;position:relative;z-index: 2;}
	.bsimg{width: 48upx;position: absolute;z-index: 4;right: 8upx;bottom: 40%;}
	.horse{width: 60%;height: 46upx;border-radius: 64upx;background: #F0A012;box-shadow: 0 4upx 0 0 #E2870E inset;position: relative;margin-top: 20upx;left: 20%;display: flex;justify-content: space-around;flex-wrap: nowrap;padding: 10upx 20upx;}
	.horse:after,.horse:before{content: '';position: absolute;width: 60upx;height: 4upx;border-radius: 64upx;background: #EA880E;top: 50%;margin-top: -2upx;}
	.horse:after{right: -60upx;}
	.horse:before{left: -60upx;}
	.horse_d{width: 26upx;height: 26upx;background: #E0820B;border-radius: 100%;}
	.decorate{width: 100%;margin-top: 10upx;overflow: hidden;padding-top: 10upx;}
	.decorate_left{float: left;}
	.decorate_right{float: right;}
	.decorate_r{width: 40upx;height: 40upx;border-radius: 100%;display: inline-block;position: relative;background: #E1840B;}
	.decorate_left .decorate_r{margin-right: 20upx;}
	.decorate_right .decorate_r{margin-left: 20upx;}
	.decorate_r:after{content: '';position: absolute;width: 100%;height: 100%;border-radius: 100%;top:4upx;left: 0;box-shadow: 0 -4upx 0 0 #F7740A inset;background: #FEA710;}
	.imagesree{position: absolute;width: 33%;z-index: 5;left: 33.9%;bottom: 10upx;height: 200upx;}
	.imagesClick{width: 30%;left: 35%;height: 130upx;}
	.swiperBox{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 3;padding: 26upx;}
	.swiperItemBox{width: 100%;height: 100%;background: #E4AF39;border-radius: 20upx;display: flex;justify-content: space-between;flex-wrap: nowrap;padding: 10upx;}
	.swiperListBox{width: 32%;height: 100%;background: #FFFFFF;border-bottom: 20upx solid #F2F1EC;border-top: 20upx solid #F2F1EC;border-radius: 20upx;overflow: hidden;position: relative;}
	.swipers image{width: 60%;height: 60%;margin: 20%;}
	
	.swipersBox{position: absolute;}
	
	
	/* .animetionBox{width: 674upx;height: 590upx;margin-left: 38upx;position: absolute;top: 378upx;border-radius: 34upx;padding: 30upx;} */
	.winning{width: 70%;margin-left: 15%;height: 60upx;border-radius: 60upx;color: #FFFFFF;text-align: center;line-height: 60upx;background: #DB7409;box-shadow: 0 -4upx 0 0 #C8190E;}
	.swiper,.swipers,.swipersBox{width: 100%;height: 100%;}
	.view_btn{
		width: 45%;display: inline-block;text-align: center;
		height: 90upx;line-height: 90upx;font-size: 32upx;color: #ae1f30;
		margin-top: 50upx;
	}
	.view_btn_left{margin-right: 10%;}
	.btnBox{width: 100%;padding: 0 30upx;}
</style>
